<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <!-- 引入公用样式 -->
    <link rel="stylesheet" href="../../../static/sass/common/ydui.css" />
    <link rel="stylesheet" href="../../../static/sass/common/dropload.css" />
    <link rel="stylesheet" href="../../../static/stylesheets/shopping_car/shopping_car.css" />
    <!-- 引入自适应解决方案类库 -->
    <script src="../../../static/scripts/libs/ydui.flexible.js"></script>
</head>

<body>
    <div class="g-flexview">
        <!-- 主体内容开始 -->
        <section class="content_box content" style="margin-bottom: 50px;">
            <div class="lists">
                <div class="product-box">
                    <i class="icon-delete delete"></i>
                    <div class="radio">
                        <div class="ico_checkbox"></div>
                    </div>
                    <div class="product-img">
                        <img class="icon" src="../../../static/assets/img/peach.png" alt="">
                    </div>
                    <div class="product-item">
                        <div class="product-title">
                            水果脆片健康休闲食品
                        </div>
                        <div class="product-price">
                            ￥23
                        </div>
                    </div>
                    <div class="product-num">
                        <span class="m-spinner" >
                            <a href="javascript:;" class="J_Del"></a>
                            <input type="text" class="J_Input" value="1" placeholder=""/>
                            <a href="javascript:;" class="J_Add"></a>
                        </span>
                    </div>
                </div>
            </div>
        </section>

        <!-- 底部导航开始 -->
        <footer class="footer">
            <div class="accounts-box">
                <div class="radio">
                    <div class="ico_checkbox" id="all_check"></div>
                </div>
                <div class="selected-all-text">
                    全选
                </div>
                <div class="total-price">
                    总价： <span>￥0:00</span>
                </div>
                <div class="sub-btn">
                    结算(0)
                </div>
            </div>
        </footer>
        <!-- 底部导航结束 -->



        <!-- 没有数据时 -->
        <!-- <div class="empty-box">
            <div class="shopping_car">
                <img class="car"  src="../../../static/assets/icon/shopping_car.png" alt="">
            </div>
            <div class="empty_text">
                目前没有相关商品
            </div>
        </div> -->
        <!-- 没有数据时的底部导航开始 -->
        <!-- <footer class="m-tabbar">
            <a href="#" class="tabbar-item tabbar-active">
                <span class="tabbar-icon">
                    <i class="icon-home-outline"></i>
                </span>
                <span class="tabbar-txt">首页</span>
            </a>
            <a href="#" class="tabbar-item">
                <span class="tabbar-icon">
                    <i class="icon-shopcart"></i>
                </span>
                <span class="tabbar-txt">购物车</span>
            </a>
            <a href="#" class="tabbar-item">
                <span class="tabbar-icon">
                    <i class="icon-ucenter-outline"></i>
                </span>
                <span class="tabbar-txt">我的</span>
            </a>
        </footer> -->
        <!-- 底部导航结束 -->
    </div>
    <!-- 引入jQuery 2.0+ -->
    <script src="../../../static/scripts/libs/jquery.min.js"></script>
    <!-- 引入YDUI脚本 -->
    <script src="../../../static/scripts/libs/ydui.js"></script>
    <script src="../../../static/scripts/libs/dropload.js"></script>
    <script src="../../../static/scripts/apps/shopping_car.js"></script>
</body>
<script>
    $(function () {
        // 页数
        var page = 0;
        // 每页展示10个
        var size = 10;

        // dropload
        $('.content').dropload({
            scrollArea: window,
            domUp: {
                domClass: 'dropload-up',
                domRefresh: '<div class="dropload-refresh">↓下拉刷新-自定义内容</div>',
                domUpdate: '<div class="dropload-update">↑释放更新-自定义内容</div>',
                domLoad: '<div class="dropload-load"><span class="loading"></span>加载中-自定义内容...</div>'
            },
            domDown: {
                domClass: 'dropload-down',
                domRefresh: '<div class="dropload-refresh">↑上拉加载更多-自定义内容</div>',
                domLoad: '<div class="dropload-load"><span class="loading"></span>加载中-自定义内容...</div>',
                domNoData: '<div class="dropload-noData">暂无数据-自定义内容</div>'
            },
            //下拉
            loadUpFn: function (me) {
                $.ajax({
                    type: 'GET',
                    url: 'http://ons.me/tools/dropload/json.php?page=' + page + '&size=' + size,
                    dataType: 'json',
                    success: function (data) {
                        var result = '';
                        for (var i = 0; i < data.length; i++) {
                            result += '<div class="product-box">';
                            result += '    <i class="icon-delete delete"></i>';
                            result += '    <div class="radio">';
                            result += '        <div class="ico_checkbox"></div>';
                            result += '    </div>';
                            result += '    <div class="product-img">';
                            result += '        <img class="icon" src="' + data[i].pic + '" alt="">';
                            result += '    </div>';
                            result += '    <div class="product-item">';
                            result += '        <div class="product-title">';
                            result += '            ' + data[i].title;
                            result += '        </div>';
                            result += '        <div class="product-price">';
                            result += '            ￥23';
                            result += '        </div>';
                            result += '    </div>';
                            result += '    <div class="product-num">';
                            result += '        <span class="m-spinner">';
                            result += '            <a href="javascript:;" class="J_Del"></a>';
                            result += '            <input type="text" value="1" class="J_Input" placeholder=""/>';
                            result += '            <a href="javascript:;" class="J_Add"></a>';
                            result += '        </span>';
                            result += '    </div>';
                            result += '</div>';
                            
                        }
                        // 为了测试，延迟1秒加载
                        setTimeout(function () {
                            $('.lists').prepend(result);
                            // 每次数据加载完，必须重置
                            me.resetload();
                            // 重置页数，重新获取loadDownFn的数据
                            page = 0;
                            // 解锁loadDownFn里锁定的情况
                            me.unlock();
                            me.noData(false);
                        }, 1000);
                    },
                    error: function (xhr, type) {
                        alert('Ajax error!');
                        // 即使加载出错，也得重置
                        me.resetload();
                    }
                });
            },
            loadDownFn: function (me) {
                page++;
                // 拼接HTML
                var result = '';
                $.ajax({
                    type: 'GET',
                    url: 'http://ons.me/tools/dropload/json.php?page=' + page + '&size=' + size,
                    dataType: 'json',
                    success: function (data) {
                        var arrLen = data.length;
                        if (arrLen > 0) {
                            for (var i = 0; i < arrLen; i++) {
                                result += '<div class="product-box">';
                                result += '    <i class="icon-delete delete"></i>';
                                result += '    <div class="radio">';
                                result += '        <div class="ico_checkbox"></div>';
                                result += '    </div>';
                                result += '    <div class="product-img">';
                                result += '        <img class="icon" src="' + data[i].pic + '" alt="">';
                                result += '    </div>';
                                result += '    <div class="product-item">';
                                result += '        <div class="product-title">';
                                result += '            ' + data[i].title;
                                result += '        </div>';
                                result += '        <div class="product-price">';
                                result += '            ￥23';
                                result += '        </div>';
                                result += '    </div>';
                                result += '    <div class="product-num">';
                                result += '        <span class="m-spinner">';
                                result += '            <a href="javascript:;" class="J_Del"></a>';
                                result += '            <input type="text" value="2" class="J_Input" placeholder=""/>';
                                result += '            <a href="javascript:;" class="J_Add"></a>';
                                result += '        </span>';
                                result += '    </div>';
                                result += '</div>';
                            }
                            // 如果没有数据
                        } else {
                            // 锁定
                            me.lock();
                            // 无数据
                            me.noData();
                        }
                        // 为了测试，延迟1秒加载
                        setTimeout(function () {
                            // 插入数据到页面，放到最后面
                            $('.lists').append(result);
                            // 每次数据插入，必须重置
                            me.resetload();
                        }, 1000);
                    },
                    error: function (xhr, type) {
                        alert('Ajax error!');
                        // 即使加载出错，也得重置
                        me.resetload();
                    }
                });
            },
            threshold: 50
        });
    });
    
    //删除确认
    var dialog = window.YDUI.dialog;
    $(document).on('click', '.delete', function(){
        let that = $(this)
        /* 普通确认框 */
        dialog.confirm('确定删除吗？','', function () {
            dialog.toast('已经删除了', 'none', 1000);
            that.parent().remove()
        });
        
    })
    
    //单选全选
    $('.lists').on('click', '.ico_checkbox', function(){
        
        let len = $('.lists .ico_checkbox').length
        let checkLen = $('.lists .ico_checkbox_on').length
        
        let total = 0
        if($(this).hasClass('ico_checkbox_on')){
            $(this).removeClass('ico_checkbox_on')
            checkLen = $('.lists .ico_checkbox_on').length
            if(checkLen < len){
                $('#all_check').removeClass('ico_checkbox_on')
            }
        }else{
            $(this).addClass('ico_checkbox_on')
            checkLen = $('.lists .ico_checkbox_on').length
            if(checkLen >= len){
                $('#all_check').addClass('ico_checkbox_on')
            }
        }
    })
    $('#all_check').click(function(){
        if($(this).hasClass('ico_checkbox_on')){
            $(this).removeClass('ico_checkbox_on')
            $('.lists').find('.ico_checkbox').removeClass('ico_checkbox_on')
        }else{
            $(this).addClass('ico_checkbox_on')
            $('.lists').find('.ico_checkbox').addClass('ico_checkbox_on')
           
        }
        
    })
    
    //加减
    $('.lists').on('click', '.J_Add', function(){
        let inp = $(this).parent().find('.J_Input')
        let num = inp.val()
        num ++
        inp.val(num)
    })
    $('.lists').on('click', '.J_Del', function(){
        let that = $(this)
        let inp = $(this).parent().find('.J_Input')
        let num = inp.val()
        num --
        inp.val(num)
        if(num == 0){
            dialog.confirm('确定删除吗？','', function () {
                dialog.toast('已经删除了', 'none', 1000);
                that.parent().parent().parent().remove()
            });
        }
    })
    
</script>

</html>